<template>
  <div id="echarts3"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts3()
  },
  created() {},
  methods: {
    showEcharts3() {
      // 绿色，紫色，蓝色，红色，黄色, 蓝色，橙色,绿色
      const color = [
        'rgba(102, 204, 255, .5)',
        'rgba(255, 236, 140, .5)',
        'rgba(86, 132, 244, .5)',
        'rgba(243, 104, 104, .5)',
        'rgba(252, 213, 75, .5)',
        'rgba(0, 108, 237, .5)',
        'rgba(223, 122, 144, .5)',

        'rgba(0, 207, 255, .5)',
        'rgba(247, 100, 100, .5)',
        'rgba(86, 163, 255, .5)',
        'rgba(244, 181, 97, .5)',
      ] //2个以上的series就需要用到color数组
      const color2 = [
        'rgba(102, 204, 255, 1)',
        'rgba(255, 236, 140, 1)',
        'rgba(86, 132, 244, 1)',
        'rgba(243, 104, 104, 1)',
        'rgba(252, 213, 75, 1)',
        'rgba(0, 108, 237, 1)',
        'rgba(223, 122, 144, 1)',
        'rgba(0, 207, 255, 1)',
        'rgba(247, 100, 100, 1)',
        'rgba(86, 163, 255, 1)',
        'rgba(244, 181, 97, 1)',
      ]
      let myChart = this.$echarts.init(document.getElementById('echarts3'))
      let data = JSON.parse(JSON.stringify(this.data))
      let data2 = JSON.parse(JSON.stringify(data))
      data.map((v, i) => {
        v.itemStyle = {
          color: color[i],
        }
      })
      data2.map((v, i) => {
        v.itemStyle = {
          color: color2[i],
        }
      })
      let total = 0 // 总数
      data.map((v) => {
        total += Number(v.value)
      })
      let option = {
        label: {
          formatter: '{a|{c}}{l|个}\n{per|{b}}',
          rich: {
            l: { align: 'left', color: '#A5CDF2', fontWeight: 800 },
            a: {
              color: 'inherit',
              fontSize: 18,
              align: 'left',
            },
            b: {
              color: '#fff',
              fontSize: 14,
              // lineHeight: 22,
              align: 'left',
            },
            per: {
              color: '#fff',
              padding: [3, 4],
              borderRadius: 4,
              align: 'left',
            },
          },
        },

        series: [
          // 第二圈
          {
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: ['38%', '50%'],
            label: {
              show: false,
            },
            data: data,
          },
          // 外圈
          {
            name: '',
            type: 'pie',
            radius: ['49%', '65%'],
            data: data2,
          },
          {
            type: 'gauge',
            center: ['50%', '50%'],
            radius: '32%', // 圆圈的半径
            startAngle: 0,
            endAngle: 360,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, 'rgba(6, 191, 255, 1)']],
              },
            },
            pointer: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              width: '100%',
              lineHeight: 40,
              offsetCenter: [0, 0],
              fontSize: 24,
              fontWeight: 'normal',
              color: 'rgba(102, 255, 255, 1)',
              formatter: '{b|总数}\n{value}{a|个}',
              rich: {
                a: {
                  fontSize: 18,
                },
                b: {
                  fontSize: 15,
                  color: '#fff',
                },
              },
            },
            data: [
              {
                value: total,
              },
            ],
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>
